<template>
  <div class="checkstand">
    <div class="top">
      <span class="part">订单编号:{{ orderSource.order_no }}</span>
      <span class="part">订单数量:{{ orderSource.order_num }}</span>
      <span class="part"
        >支付金额:<span class="red"
          >￥{{ twoFixed(orderSource.order_price) }}</span
        ></span
      >
    </div>

    <div class="bottom">
      <div class="first">
        <div class="dot"></div>
        <span class="title">支付方式</span>
      </div>
    </div>
    <div class="btn-box">
      <div
        :class="['btn', 'thumb', act === 1 ? `act` : `noact`]"
        @click="() => (act = 1)"
      >
        余额支付
      </div>
      <div
        :class="['btn', 'thumb', act === 2 ? `act` : `noact`]"
        @click="() => (act = 2)"
      >
        微信支付
      </div>
      <div
        :class="['btn', 'thumb', act === 3 ? `act` : `noact`]"
        @click="() => (act = 3)"
      >
        支付宝支付
      </div>
      <!-- <div
        :class="['btn', 'thumb', act === 4 ? `act` : `noact`]"
        @click="() => (act = 4)"
      >
        对公付款
      </div> -->
    </div>

    <div class="btn-content" v-show="act === 1">
      <div class="pass">
        <span class="label">输入密码:</span>
        <input v-model="payPass" class="input" type="password" />
      </div>

      <div class="confirm-btn thumb" @click="payment">确认支付</div>
    </div>

    <div class="btn-content" v-show="act === 2">
         <div class="text">距离二维码过期还剩 <span class="red">{{ payTypeNum.wechat }}</span> 秒，过期后请刷新页面重新获取</div>

         <div class="qrcode">
             
               <img :src="publicUrl(`/images/qrcode.png`)" class="img">
               <div class="small">打开手机微信扫一扫付款</div>
          
         </div>
    </div>

    

    <div class="btn-content" v-show="act === 3">
         <div class="text">距离二维码过期还剩 <span class="red">{{ payTypeNum.alibaba }}</span> 秒，过期后请刷新页面重新获取</div>

         <div class="qrcode">
             
               <img :src="publicUrl(`/images/qrcode.png`)" class="img">
               <div class="small">打开手机微信扫一扫付款</div>
          
         </div>
    </div>

    <Dialog v-model:visible="payconfirm" :show-top="false">
      <div class="dialog-content">
        <div class="dialog-top">
        <img :src="publicUrl(`/images/pay-success.png`)" class="success-icon" />
        <div class="text">支付成功</div>
        </div>
        <div class="buttons">
          <div class="left part thumb">查看订单</div>
          <router-link to="/home/index" class="right part thumb" >返回首页</router-link>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts" name="">
import { ref,watch } from "vue";
import { publicUrl, twoFixed } from "@/utils/util";
import { toast } from "vue3-toastify";
import Dialog from "@/components/Dialog/index.vue";
interface OrderSource {
  order_no: string;
  order_num: number;
  order_price: number;
}
const orderSource = ref<OrderSource>({
  order_no: "2023010720460012",
  order_num: 2,
  order_price: 1499,
});

const act = ref<1 | 2 | 3 | 4>(1);
const payPass = ref<string>("");
var timer:NodeJS.Timeout|undefined =  undefined;
watch(()=>act.value,(newValue:1 | 2 | 3 | 4)=>{
     clearInterval(timer);
     if(newValue === 2){
        payTypeNum.value.wechat = 1000;
        timer = setInterval(()=>{
            payTypeNum.value.wechat--;
        },1000);
     }else if(newValue === 3){
        payTypeNum.value.alibaba = 1000;
        timer = setInterval(()=>{
            payTypeNum.value.alibaba--;
        },1000);
     }
})

const payTypeNum = ref<{
     alibaba:number;
     wechat:number;
}>({
    alibaba:1000,
    wechat:1000,
});

const payconfirm = ref<boolean>(false);
const payment = () => {
  if (payPass.value === "")  return toast.error(`请输入支付密码`);
  
  payconfirm.value = true;
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
